 <template>
    <div class="recommend_goods_list">
      <div class="recommend_goods_list_title">
        <div class="title_content">
          <span class="hxagon left"></span>
          <span class="title_text"> {{title}}</span>
          <span class="hxagon right"></span>
        </div>
      </div>
      <good-list :list="list" :clickTo="clickTo"></good-list>
    </div>
</template>

<script>
import GoodList from './goodsList'
import {mapState,mapActions} from 'vuex';
export default {
  props: {
    list:{
       type:Array,
       default(){
           return [];
       }
    },
    clickTo:{
       type:Function,
       required:false
    },
    title:{
      type:String,
      default:'为你推荐'
    }
  },
  components:{
     GoodList
  },
  data() {
    return {}
  },
  computed: mapState({
    
  }),
  created() {
  
  },

  methods: {
    ...mapActions(['toggleLoading','showMsg','showModal']),
  }
}
</script>

<style lang="less" scoped>
.recommend_goods_list{
  background-color: #F6F6F6;
  padding-left: 0.2rem;
  padding-top: 0.4rem;
  .recommend_goods_list_title{
     padding-bottom: 0.2rem;
    .title_content{
      display: flex;
      align-items: center;
      justify-content: center;
      height: 0.36rem;
      .hxagon{
        position: relative;
        width: 0.06rem;
        height: 0.104rem;
        margin: 0;
        background-color: #D8D8D8;
        transform: rotate(90deg);
        &::before {
          content: '';
          display: block;
          position: absolute;
          width: 0;
          height: 0;
          right:0.06rem;
          border-width: 0.052rem 0.03rem;
          border-style: solid;
          border-color: transparent #D8D8D8 transparent transparent;
        }
        &::after {
          content: '';
          display: block;
          position: absolute;
          width: 0;
          height: 0;
          left:0.06rem;
          border-width: 0.052rem 0.03rem;
          border-style: solid;
          border-color: transparent transparent transparent #D8D8D8;
          top:0;
        }
      }
      .title_text{
        font-size: 0.28rem;
        line-height: 0.36rem;
        color: #999;
        margin:0 0.1rem;
      }
    }
  }
 
}
</style>
